iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0

大家好!今天是鐵人賽的第26天,很高興即將完賽啦!各位有努力堅持下去嗎?!
今天要講的是摺疊的效果,摺疊插件用於顯示和隱藏內容。

collapse

collapse
<p>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
        test collapse with href
    </a>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="false" aria-controls="collapse">
        test collapse with button
    </button>
</p>
<div class="collapse" id="collapse">
    <div class="card card-body">
        test collapse
    </div>
</div>

水平展開的collapse

水平展開的collapse
<p>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidth" aria-expanded="false" aria-controls="collapseWidth">
        collapse 水平展開效果
    </button>
</p>
<div>
    <div class="collapse collapse-horizontal" id="collapseWidth">
        <div class="card card-body" style="width: 300px;">
            collapse 水平展開效果
        </div>
    </div>
</div>

以上為今天的鐵人賽文章,各位明天見囉!莎喲娜拉!


上一篇
<DAY 25> breadcrumb (一)
下一篇
<DAY 27> collapse (二)
系列文
不斷片(篇)挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言